<template>
  <div>
    <base-header
      type="gradient-success"
      class="pb-6 pb-8 pt-5 pt-md-7"
    ></base-header>
    <notifications></notifications>
    <div class="container-fluid mt--7">
      <div class="card shadow">
        <card type="frame">{{ title }}</card>
        <div class="card-header border-0">
          <div>
            <div class="form-group row" v-show="showSaveBtn">
              <label class="col-md-2 col-form-label form-control-label"
                >小队名称</label
              >
              <div class="col-md-10">
                <base-input v-model="model.teamname"></base-input>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label form-control-label"
                >文章标题</label
              >
              <div class="col-md-10">
                <base-input v-model="model.title"></base-input>
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
                >作者</label
              >
              <div class="col-md-10">
                <base-input v-model="model.authornick"></base-input>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label form-control-label"
                >文章图片[第一张为封面图]</label
              >
              <div class="col-md-10">
                <div class="media align-items-center">
                  <div
                    class="media-body"
                    v-for="(item, i) in this.model.fileimgs"
                  >
                    <img style="width: 200px" :src="item" />
                    <base-button type="warning" @click="delimg(i)">
                      <i class="ni ni-send"></i>删除
                    </base-button>
                    <base-button type="info" @click="moveimg(item, i)">
                      <i class="ni ni-send"></i>移动到第一个
                    </base-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-2 col-form-label form-control-label"
                >上传</label
              >
              <div class="col-md-10">
                <vue-file-upload
                  :url="uploadUrl"
                  ref="vueFileUploader"
                  class="fileupload-button"
                  :autoUpload="true"
                  v-bind:events="cbEvents"
                  v-bind:filters="filters"
                  v-bind:request-options="reqopts"
                  v-on:onAdd="onAddItem"
                ></vue-file-upload>
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-email-input"
                class="col-md-2 col-form-label form-control-label"
                >文章详情</label
              >
              <div class="col-md-10">
                <textarea
                  class="form-control"
                  rows="20"
                  v-model="model.artcontent"
                ></textarea>
              </div>
            </div>
            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
                >是否公开</label
              >
              <div class="col-md-10">
                <base-radio name="1" class="mb-3" v-model="model.ispublic"
                  >公开</base-radio
                >
                <base-radio name="0" class="mb-3" v-model="model.ispublic"
                  >私有</base-radio
                >
              </div>
            </div>

            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
                >是否推荐</label
              >
              <div class="col-md-10">
                <base-radio name="1" class="mb-3" v-model="model.recommend"
                  >推荐</base-radio
                >
                <base-radio name="0" class="mb-3" v-model="model.recommend"
                  >不推荐</base-radio
                >
              </div>
            </div>

            <div class="form-group row" v-show="showSaveBtn">
              <label
                for="example-time-input"
                class="col-md-2 col-form-label form-control-label"
              ></label>
              <div class="col-md-10">
                <base-button type="success" @click="save()">
                  <i class="ni ni-send"></i>提交
                </base-button>
              </div>
            </div>
            <div class="form-group row" v-show="showUpdateBtn">
              <label
                for="example-time-input"
                class="col-md-2 col-form-label form-control-label"
              ></label>
              <div class="col-md-10">
                <base-button type="success" @click="update()">
                  <i class="ni ni-send"></i>更新
                </base-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueFileUpload from "vue-file-upload";
import validate from "~/config/utils/validate";
import config from "@/config";
import {
  findLdTeamArtsByIdApi,
  updateLdTeamArtsByIdApi,
  saveLdTeamArtApi,
} from "~/config/api/ldteamartservice";
export default {
  asyncData() {},
  components: {
    VueFileUpload,
  },
  head: {
    title: "小队图文记录",
  },
  name: "tables",
  data() {
    return {
      title: "",
      showSaveBtn: false,
      showUpdateBtn: false,
      uploadUrl: config.UPLOAD_TEAM_ARTS_IMG_URL,
      model: {
        id: "",
        title: "",
        authornick: "",
        fileurl: "",
        duration: "",
        artcontent: "",
        fileimgs: [],
        ispublic: "0",
        recommend: "0",
        teamid: "",
        teamname: "",
      },
      files: [], // 图片文件集合
      filters: [
        {
          name: "imageFilter",
          fn(file) {
            var type =
              "|" + file.type.slice(file.type.lastIndexOf("/") + 1) + "|";
            return "|jpg|png|jpeg|bmp|gif|".indexOf(type) !== -1;
          },
        },
      ],
      cbEvents: {
        onCompleteUpload: (file, response, status, header) => {
          this.model.fileimgs.push(response.fileUrl);
        },
        onAddFileSuccess: (file) => {},
        onProgressUpload: (file, progress) => {},
      },
      reqopts: {
        formData: {
          tokens: "",
          authorization: "",
        },
        responseType: "json",
        withCredentials: false,
        headers: {
          custormerHeader: "",
        },
      },
    };
  },
  created: function () {
    let pageaction = this.$route.query.action;
    if (pageaction == "save") {
      this.showSaveBtn = true;
      this.model.teamid = this.$route.query.teamid;
      this.model.teamname = this.$route.query.teamname;
    }
    if (pageaction == "edit") {
      this.title = "您正在编辑朗读记录";
      this.showUpdateBtn = true;
      let id = this.$route.query.id;
      this.findById(id);
    }
  },
  mounted: function () {
    this.$refs.vueFileUploader.setFormDataItem("authorization", "");
  },
  methods: {
    delimg(i) {
      this.model.fileimgs.splice(i, 1);
    },
    moveimg(item, i) {
      this.model.fileimgs.splice(i, 1);
      this.model.fileimgs.unshift(item);
    },
    onStatus(file) {
      if (file.isSuccess) {
        return "上传成功";
      } else if (file.isError) {
        return "上传失败";
      } else if (file.isUploading) {
        return "正在上传";
      } else {
        return "待上传";
      }
    },
    onPreview(file) {
      if ("URL" in window) {
        var src = window.URL.createObjectURL(file.file);
        return src;
      }
    },
    onAddItem(files) {
      this.files = files;
    },

    async findById(id) {
      let params = {
        id: id,
      };
      await findLdTeamArtsByIdApi(params).then((res) => {
        if (res.sucflag) {
          this.model.title = res.bean.title;
          this.model.fileurl = res.bean.fileurl;
          this.model.duration = res.bean.duration;
          this.model.authornick = res.bean.authornick;
          this.model.ispublic = res.bean.ispublic;
          this.model.gcomment = res.bean.gcomment;
          this.model.recommend = res.bean.recommend;
          this.model.fileimgs = JSON.parse(res.bean.fileimgs);
          let contentdata = JSON.parse(res.bean.articlecontent);
          let vdata = [];
          contentdata.forEach((element) => {
            vdata.push(element.content);
          });
          this.model.artcontent = vdata.toString();
          this.model.id = res.bean.id;
          this.model.teamid = res.bean.teamid;
        }
      });
    },
    async save() {
      let imgs = JSON.stringify(this.model.fileimgs);
      let arraycontent = [];
      let content = {
        content: this.model.artcontent,
        style: "left",
      };
      arraycontent.push(content);
      let params = {
        id: this.model.id,
        title: this.model.title,
        duration:this.model.duration,
        fileimgs: imgs,
        articlecontent: JSON.stringify(arraycontent),
        ispublic: this.model.ispublic,
        recommend: this.model.recommend,
        teamid:this.model.teamid
      };
      await saveLdTeamArtApi(params).then((res) => {
        if (res.sucflag) {
          this.$router.push("/ldteam/ldteamslist");
        }
      });
    },
    async update() {
      let imgs = JSON.stringify(this.model.fileimgs);
      let arraycontent = [];
      let content = {
        content: this.model.artcontent,
        style: "left",
      };
      arraycontent.push(content);
      let params = {
        id: this.model.id,
        title: this.model.title,
        fileimgs: imgs,
        articlecontent: JSON.stringify(arraycontent),
        ispublic: this.model.ispublic,
        recommend: this.model.recommend,
      };
      await updateLdTeamArtsByIdApi(params).then((res) => {
        if (res.sucflag) {
          this.$router.push("/ldteam/ldteamartslist");
        }
      });
    },
  },
  layout: "DashboardLayout",
};
</script>
<style></style>
